<template>
  <!-- <div class="affix-container">
    <el-affix target=".affix-container" :offset="80"> -->
      <el-menu :default-active="activeIndex" 
                class="el-menu-demo" 
                mode="horizontal" 
                @select="handleSelect" 
                text-color="#000"
                active-text-color="#3375b9">
        <el-menu-item index="1">
            <span>首页</span>
        </el-menu-item>
        <el-submenu index="2">
            <template #title>聊天</template>
            <el-menu-item index="2-1">
                <span class="choice">通义千问</span>
            </el-menu-item>
            <el-menu-item index="2-2">
                <span class="choice">文心一言</span>
            </el-menu-item>
        </el-submenu>
        <el-menu-item index="3">
            <span>图片生成</span>
        </el-menu-item>
        <el-submenu index="4">
            <template #title>我的</template>
            <el-menu-item index="4-1">
                 <span class="choice">使用记录</span>
            </el-menu-item>
            <el-menu-item index="4-2">
                 <span class="choice">历史问答</span>
            </el-menu-item>
        </el-submenu>

        <div class="fr">
            <el-menu-item index="9">
                <lg></lg>
            </el-menu-item>
        </div>
    </el-menu>
    <!-- </el-affix>
  </div> -->
    
</template>

<script>
import lg from './Logininfo.vue'
export default {
    name: 'App',
    components: {
        lg
    },
    data() {
        return {
            activeIndex: '1'
        }
    },
    methods: {
        handleSelect(key, keyPath) {
            this.activeIndex = key;
            console.log(key, keyPath);
            if(key=='1')
                this.$router.push("/ai/qianwen");
            if(key=='2-1')
                this.$router.push("/ai/qianwen");
            if(key=='2-2')
                this.$router.push("/ai/qianfan");
            if(key=='3')
               this.$router.push("/ai/image");
            if(key=='4-1')
                this.$router.push("/ai/record");
            if(key=='4-2')
                this.$router.push("/ai/history");
        }
    }
}
</script>

<style scoped>
    .choice {
        text-decoration: none;
        color: #8D9095;
        transition:all 0.3s;
    }
    .choice:hover {
        color: #409EFF;
    }
    .el-menu-demo {
        background-color: rgb(255, 255, 255, 0.3);
    }
    .el-menu-demo a {
        text-decoration: none;
    }

    .affix-container {
        /* text-align: center; */
        height: 200px;
        border-radius: 4px;
        background: var(--el-color-primary-light-9) transparent;
    }
    .fr{
        float: right;
    }
</style>